<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        p {
            word-wrap: break-word;
        }

        .rich {
            color: gold;
        }

        .beauty {
            color: red;
        }

        /*这样就大过了id，实际不会这样用，直接id即可*/
        p.beauty#c {
            color: green;
        }

        #c {
            color: aqua;
        }

        /*p标签且beauty变成绿色，但是大不过id*/
        p.beauty {
            color: green;
        }

        /*.th大不过p.beauty,但是p.th可以大过p.beauty ,顺序是按照style里面顺序  用的多*/
        p.th {
            color: chocolate;
        }

        /* 用的少
        .beauty.th{
            color: orange;
        }

         */

        .r {
            color: yellow;
        }
        /*逗号相当于或,.rich或者.beauty都会应用到下面的声明,不同选择器用逗号隔开，达到或的目的 **/
        .rich,
        .beauty {
            font-size: 20px;
            width: 180px;
            background-color: gray;
        }
    </style>
</head>
<body>

<div>
    <h2 class="rich">h111111</h2>
    <h2 class="beauty">h222222</h2>
    <p class="beauty" id="c">1111111</p>
    <p class="beauty">2222222</p>
</div>
<hr>
<div>
    <h2 class="rich">h111111</h2>
    <h2 class="">h222222</h2>
    <p class="" id="">1111111</p>
    <p class="r">22222222222</p>
</div>

</body>
</html>